<template>
    <div class="pay-list">

        <div v-if="orderList.length>0">
            <van-button @click="clearOrder" size="small" type="primary">清空订单</van-button>
            <div class="card-item" v-for="(order, i) in orderList" :key="i">
                <van-cell :title="order.create_time" class="card-header">
                    <template #default>
                        <span v-if="order.status===4">已完成</span>
                        <span v-if="order.status===3" @click="evaluate(order.id)">写评价</span>
                        <span v-if="order.status===2" @click=receipt(order.id)>确认收货|</span>
                        <span v-if="order.status===1">已支付</span>
                        <span v-if="order.status===0">未支付</span>
                        <span v-if="order.is_cancel">|已取消</span>
                        <span v-else-if="order.status===0" @click="onClickOrderCancel(order.id)"
                        >|取消订单</span
                        >
                    </template>
                </van-cell>

                <div
                    @click="onClickShowOrder(order.id)"
                    style="padding-top: 5px; padding-left: 5px"
                >
                    <van-row type="flex" gutter="20">
                        <van-col v-for="item in order.goods" :key="item.id">
                            <van-icon
                                :name="`${APIDomainName}${item.goods_img}`"
                                :badge="`X${item.count}`"
                                size="70"
                            >
                            </van-icon>
                        </van-col>
                    </van-row>
                </div>
                <div class="amount">
                    实付金额：
                    <span>¥{{ order.amount }}</span>
                </div>
            </div>
        </div>
        <div v-else>
            <van-empty description="暂无数据"></van-empty>
        </div>

    </div>
</template>

<script>
import {getOrderList, cancelOrderById, clearOrder, receipt} from "@/api/order.js";

export default {
    components: {},
    data() {
        return {
            orderList: [],
        };
    },
    created() {
        this.getOrderList();
    },
    computed: {
        APIDomainName() {
            return process.env.VUE_APP_APIDOMAINNAME;
        },
    },
    methods: {
        async getOrderList() {
            try {
                let result = await getOrderList();
                this.utils.resultList(result)
                this.orderList = result.data
            } catch (error) {
                await this.$dialog.alert({title: "错误", message: error});
            }
        }, //=======================================
        onClickShowOrder(id) {
            this.$router.push({name: "order_show", params: {id: id}});
        }, //=======================================
        async onClickOrderCancel(id) {
            try {
                let result = await cancelOrderById({id});
                if (result.code === 1) {
                    await this.getOrderList();
                } else if (result.code === 2) {
                    await this.$router.push({name: "login"});
                } else {
                    throw result.msg;
                }
            } catch (error) {
                await this.$dialog.alert({title: "错误", message: error});
            }
        }, //=======================================
        async clearOrder() {
            let result = await clearOrder()
            this.utils.resultBool(result)
            this.orderList = []
        },
        async receipt(id) {
            let result = await receipt({id: id})
            if(this.utils.resultBool(result)){
                await this.getOrderList();
            }
        },
        evaluate(id) {
            this.$router.push({name:"buyerEvaluate",query:{orderId:id}})
        }
    },
};
</script>

<style lang="less" scoped>
.card-item {
    margin-top: 5px;
    margin-right: 5px;
    margin-left: 5px;
    margin-bottom: 0px;
    background-color: rgb(243, 239, 239);
    font-size: 16px;
}

.card-header {
    padding: 5px 5px;
    color: #999;
    font-size: 16px;
    display: flex;
    justify-content: space-between;

    span.title {
        color: #888;
    }

    span.status {
        font-weight: bold;
    }
}

.amount {
    padding: 5px 5px;
    text-align: right;
    color: #6b6969;
    font-weight: bold;
    background-color: rgb(216, 219, 217);
}
</style>
